<template>
  <div>
    <form action="/">
      <van-search
        v-model.trim="value"
        background="#3296fa"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="$router.back()"
      />
    </form>
    <search-results v-if="show" :text="value" />
    <search-history v-else-if="!value" :history="history" />
    <search-suggestion v-else :search-text="value" @onSearch="onSearch" />
  </div>
</template>

<script>
import SearchHistory from './compotents/SearchHistory.vue'
import SearchResults from './compotents/SearchResults.vue'
import SearchSuggestion from './compotents/SearchSuggestion.vue'
import { getStorage, setStorage } from '@/utils/storage.js'
export default {
  components: { SearchHistory, SearchResults, SearchSuggestion },
  data() {
    return {
      show: false,
      value: '',
      history: getStorage('TT-HISTORY') || []
    }
  },
  watch: {
    history: {
      deep: true,
      handler(val) {
        setStorage('TT-HISTORY', val)
      }
    }
  },
  created() {

  },

  methods: {
    onSearch(item) {
      console.log(item)
      this.value = item
      this.isShow = true
      this.history.unshift(this.value)
      this.history = [...new Set(this.history)]
    }
  }
}
</script>

<style scoped lang='less'>

</style>
